<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" style="border: 1px solid brown; display: block; margin: auto;"></canvas>
		<div>
		</div>
		<script>
			window.onload = function() {
				var canvas = document.getElementById("canvas");
				var cxt = canvas.getContext("2d");
				canvas.width = 550;
				canvas.height = 400;
				
				//绘制人脸
				cxt.beginPath()
				cxt.fillStyle="yellow";
				cxt.arc(100,100,80,0,2*Math.PI);
				cxt.fill();
				cxt.closePath()
				//绘制眼睛
				cxt.beginPath()
				cxt.fillStyle="black";
				cxt.arc(70,80,10,0,2*Math.PI);
				cxt.arc(130,80,10,0,2*Math.PI);
				cxt.fill();
				cxt.closePath()
				
				//绘制嘴巴
				cxt.beginPath()
				cxt.fillStyle="black";
				cxt.arc(100,100,45,1/6*Math.PI ,5/6*Math.PI);
				cxt.fill();
				cxt.closePath()
					
				
				window.setInterval(function(){
					
					cxt.clearRect(0,0,canvas.width,canvas.height);
					cxt.beginPath()
					cxt.fillStyle="yellow";
					cxt.arc(100,100,80,0,2*Math.PI);
					cxt.fill();
					cxt.closePath()
					//绘制眼睛
					cxt.beginPath()
					cxt.fillStyle="black";
					cxt.arc(70,80,10,Math.PI,2*Math.PI,true);
					cxt.arc(130,80,10,Math.PI,2*Math.PI,true);
					cxt.fill();
					cxt.closePath()
					
					//绘制嘴巴
					cxt.beginPath()
					cxt.fillStyle="black";
					cxt.arc(100,100,45,1/6*Math.PI ,5/6*Math.PI);
					cxt.fill();
					cxt.closePath()
				},2000)
			}
		</script>
	</body>
</html>
